<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拷贝创建流程规则</title>
</head>
<body>
<div th:fragment="main" id="copyProcessRule">
    <style type="text/css">
        #copyProcessRule{
            width: auto;
            min-width: 1000px;
            padding: 20px 25px 10px 25px;
            height: 100%;
            background-color: #eaeaea;
            overflow: auto;
            color: #333;
        }
        .content-title{
            color: #000;
            font-size: 14px;
            padding-bottom: 20px;
        }
        .content-title span{
            cursor: pointer;
        }
        .content-bar{
            margin-top:50px;
        }
        .content-bar .navbar-form{
            padding: 0 5px;
            margin: 0 auto;
        }
        .form-group{
            text-align: right;
        }
        .btn-cyan{
            color: #fff;
            background-color: rgba(26, 156, 178, 1);
            border-color: rgba(26, 156, 178, 1);
        }
        .btn-cyan:hover{
            color: #fff;
            background-color: rgba(25, 109, 123, 0.8);
            border-color: rgba(25, 109, 123, 1);
        }
        .uploadIco:hover{
            color:#000000;
        }
        .btn-cyan:active{
            color: #fff;
            background-color: rgba(25, 109, 123, 1);
            border-color: rgba(25, 109, 123, 1);
        }
        .btn-cyan:focus{
            color: #fff;
            background-color: rgba(25, 109, 123, 1);
            border-color: rgba(25, 109, 123, 1);
        }
        .btn-bg{
            margin: 0 10px;
            padding: 7px 25px;
        }
        .footer{
            float: right;
            margin-right: 20%;
            margin-top:30px;
        }

        .form-label{
            width: 17%;
            float: left;
            text-align: right;
            margin-bottom: 0;
            padding-top: 7px;
            padding-left: 15px;
            padding-right: 15px;
        }
        #fileupload {
            display: none;
        }
        .form-input{
            width: 25%;
            min-width: 100px;
            height: 34px;
            float: left;
            padding: 6px 12px;
            background-color: #fff;
            border: 1px solid #c2cad8;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        .image{
            height:120px;
            display:block;
        }
        textarea.form-input{
            height: auto;
        }
        input[type=button]{
            float: left;
        }
        .photo{
            width: 25%;
            float: left;
            text-align: right;
            margin-bottom: 0;
            padding-top: 8px;
            padding-left: 13px;
            padding-right: 15px;
        }
        .img-box{
            margin-left:15%;
        }
        .img-box>div{
            float: left;
            margin: 0 10px;
        }
        .img{
            width:100px;
            height:100px;
        }
        .imgDescription{
            width:100px;
            margin:5px 0;
            display:block;
        }
        .delete{
            width:100%;
            flaot:left;
            display:block;
            color:#FF0000;
        }
        .uploadIco{
            color:#0000FF;
            margin-top: 8px;
            float:left;
        }
        .btn{
            border-radius: 0;
        }
    </style>
    <div class="content-title">
        <p><span>系统管理</span>&nbsp;>&nbsp;<span>拷贝创建流程规则</span></p>
    </div>
    <div class="content-bar">
        <form id="form-box" class="form-horizontal clearfix col-xs-offset-1" autocomplete="off">
            <div class="form-group">
                <label class="form-label" for="processRuleName">流程规则名称&nbsp;:</label>
                <input type="text" id="processRuleName" name="processRuleName" class="form-input" placeholder>
                <label class="form-label" for="deviceTypeId">设备类型&nbsp;:</label>
                <select id="deviceTypeId" class="form-input" name="deviceTypeId"></select>
            </div>
            <div class="form-group">
                <label class="form-label" for="workOrderTypeId">工单类型&nbsp;:</label>
                <select id="workOrderTypeId" class="form-input" name="workOrderTypeId"></select>
                <label class="form-label" for="photoCount">需要示例图片数量&nbsp;:</label>
                <select id="photoCount" class="form-input" name="photoCount" onchange="photoCountFn()">
                    <option value="null">选择图片数量</option>
                    <option value="0">任意</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                </select>

            </div>
            <div class="form-group">
                <label class="form-label" for="projectId">项目名称&nbsp;:</label>
                <select id="projectId" class="form-input" name="projectId"></select>
                <label class="form-label" for="processRuleDescription">备注&nbsp;:</label>
                <textarea class="form-input" id="processRuleDescription" name="description" cols="0" rows="4"></textarea>
                <label class="form-label" for="additionalBusinessId">附加业务信息&nbsp;:</label>
                <select id="additionalBusinessId" class="form-input" name="additionalBusinessId">
                    <option value="1">①基站勘察</option>
                    <option value="2">②基站安装</option>
                    <option value="3">③基站排障</option>
                    <option value="4">④终端勘察</option>
                    <option value="5">⑤终端安装</option>
                    <option value="6">⑥终端排障</option>
                    <option value="7">⑦监控勘察</option>
                    <option value="8">⑧监控安装</option>
                    <option value="9">⑨监控排障</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label" for="uploadIco">示例图片&nbsp;:</label>
                <a type="text" onclick="appFile()"  id="uploadIco" class="uploadIco" >选择图标文件</a>
                <input id="fileupload" accept=".jpg" type="file" name="file" th:attr="data-url=@{'/file/upload/temp'}" multiple="multiple">
                <div class="photo" id="photo"></div>
            </div>
            <div id="img-box" class="img-box clearfix">
            </div>
            <div class="form-group">
                <!-- <input type="button" value="返回" class="btn btn-default pull-right cancel" id="cancel"> -->
                <!-- <input type="button" value="保存" class="btn btn-primary pull-right save" id="save"> -->
                <div class="footer">
                    <a id="save" class="btn btn-cyan btn-bg" role="button">保存</a>
                    <a id="cancel" class="btn btn-cyan btn-bg" href="#qualitycontrol-systemGroup-processRule" role="button">返回</a>
                </div>
            </div>
        </form>
        <script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
        <script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
        <script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}"></script>
        <script type="text/JavaScript">
            // 获取流程规则信息
            console.log(processRuleData)
            var id = processRuleData.id;
            $("#processRuleName").val(processRuleData.name);
            $("#processRuleDescription").val(processRuleData.description);
            $("#additionalBusinessId").val(processRuleData.additionalBusinessId);



            var phCount =  null;
            var imgnum = null;
            var phnum = 1;
            var imgList = [];
            var j = null;
            var imageStr = null;
            var phCountStr = null;


            console.log(phCount)



            // 查询工单类型
            $.ajax({
                url: contextPath + "/WorkOrderType/queryAllWorkOrderType",
                type: "get",
                cache: false,
                dataType: "json",
                success: function(data){
                    var str = '<option value="">请选择</option>';
                    for (var i =0 ,len = data.length; i < len; i++) {
                        str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
                    }
                    $("#workOrderTypeId").html(str);
                    $("#workOrderTypeId").val(processRuleData.workOrderTypeId);
                },
                error: function(data){
                    console.log(data);
                    $("#workOrderType").html('<option value="">数据异常</option>');
                }
            });
            // 查询项目
            $.ajax({
                url: contextPath + "/Project/queryAllProject",
                type: "get",
                cache: false,
                dataType: "json",
                success: function(data){
                    var str = '<option value="">请选择</option>';
                    for (var i =0 ,len = data.length; i < len; i++) {
                        str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
                    }
                    $("#projectId").html(str);
                    $("#projectId").val(processRuleData.projectId);
                },
                error: function(data){
                    console.log(data);
                    $("#projectId").html('<option value="">数据异常</option>');
                }
            });
            // 查询设备类型
            $.ajax({
                url: contextPath + "/DeviceType/queryAllDeviceType",
                type: "get",
                cache: false,
                dataType: "json",
                success: function(data){
                    var str = '<option value="">请选择</option>';
                    for (var i =0 ,len = data.length; i < len; i++) {
                        str += '<option value="' + data[i].id + '">' + data[i].name + "</option>";
                    }
                    $("#deviceTypeId").html(str);
                    $("#deviceTypeId").val(processRuleData.deviceTypeId);
                },
                error: function(data){
                    console.log(data)
                    $("#deviceTypeId").html('<option value="">数据异常</option>');
                }
            });
            //
            $.ajax({
                url: contextPath + "/ProcessRule/copyProcessRule/" + id,
                type: "get",
                cache: false,
                dataType: "json",
                success: function(data){
                    if(data.code == 1){
                        console.log(data.data);
                        imgnum = data.data.processRuleToImageFileList.length;
                        phCount = data.data.photoCount;
                        $("#photoCount").val(data.data.photoCount);
                        if(phCount == 0){
                            phCountStr ="<label  for='imagenum'>可以上传任意数量图片,已上传" + imgnum + "张图片</label>";
                        }
                        else{
                            phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + imgnum + "张图片</label>";
                        }
                        $("#photo").append(phCountStr);
                        for(var i = 0 ; i < imgnum ; i++){
                            var obj = {};
                            j = i + 1;
                            obj.id = data.data.processRuleToImageFileList[i].id;
                            obj.processRuleId = data.data.processRuleToImageFileList[i].processRuleId;
                            obj.deletePath = data.data.processRuleToImageFileList[i].deletePath;
                            obj.downPath = data.data.processRuleToImageFileList[i].downPath;
                            obj.description = data.data.processRuleToImageFileList[i].description;
                            imgList[i] = obj;

                            imageStr = "<div id='image" + j + "'><img processRuleId='" + obj.processRuleId + "'class='img' downpath='" + obj.downPath + "' delpath='" + obj.deletePath + "' src='" + obj.downPath +"' id='" + obj.id + "'>"
                                + "<input class='imgDescription' id='imgDescription" + j +"'value='" + obj.description +"' tyep='text'>"
                                + "<a delPath='image" + j +"' class='delfileButton' style='color:#FF0000' onclick='deleteImg(this)'>&nbsp;[删除]</a></div>";

                            $("#img-box").append(imageStr);
                        }
                    }
                },
                error: function(data){

                }
            });
            //上传图片数量
            function photoCountFn(){
                phCount = $("#photoCount").val();
                if(phCount != "null"){
                    if(phCount == "0"){
                        phCountStr = "<label  for='imagenum'>可上传任意数量图片</label>";
                    }
                    else{
                        phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片</label>";
                    }
                }
                else{
                    phCountStr = "<label  for='imagenum'>请选择示例图片的数量</label>";
                }
                $('#photo').html("");
                $("#photo").append(phCountStr);
            }
            //上传图片
            function appFile(){
                var upFiles = $(".upfile");
                //获取选择的 img.attr
                upFiles.each(function(index,element){
                    console.log($(element).attr('attr'));
                });
                console.log(phCount)
                if(!phCount){
                    toastr.error("请选择示例图片数量！");
                }else{
                    if(imgnum > phCount && phCount != 0){
                        toastr.error("上传图片已达上限");
                    }else{
                        $('#fileupload').click();
                    }
                }
            }


            $('#fileupload').fileupload({
                singleFileUploads : false,
                dataType : 'json',
                done : function(e, data) {
                    if (data.result.code == 1) {
                        var uploadFiles = data.result.data;
                        console.log(uploadFiles);
                        uploadFiles.forEach(function(filepath) {

                            imgnum++;
                            $('#photo').html("");
                            if(phCount == 0){
                                phCountStr ="<label  for='imagenum'>可以上传任意数量图片,已上传" + imgnum + "张图片</label>";
                            }
                            else{
                                phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + imgnum + "张图片</label>";
                            }
                            imageStr = "<div id='image" + imgnum + "'><img processRuleId='" + id +"' id='null' class='img' downpath='" + filepath.downPath + "' delpath='" + filepath.deletePath + "' src='" + filepath.downPath +"' id='img" + imgnum + "'>"
                                + "<input class='imgDescription' id='imgDescription" + imgnum +"' tyep='text'>"
                                + "<a delPath='image" + imgnum + "'class='delfileButton'style='color:#FF0000' onclick='deleteImg(this)'>&nbsp;[删除]</a></div>";


                            $("#photo").append(phCountStr);
                            $("#img-box").append(imageStr);

                        })
                    } else {
                        console.log(data.result.data);
                    }
                    console.log(imgnum);
                    console.log(imgList);
                }
            });

            //删除选择的图片
            function deleteImg(obj){
                var url = $(obj).attr('delPath');
                $("#"+url).remove("");
                phnum = imgnum - 1;
                imgnum = imgnum - 1;
                console.log(phnum);
                if(phCount == 0){
                    phCountStr = "<label  for='imagenum'>可以上传任意张图片,已上传" + phnum + "张图片</label>";
                }
                else{
                    phCountStr = "<label  for='imagenum'>需上传" + phCount + "张图片,已上传" + phnum + "张图片</label>";

                }
                $("#photo").html("");
                $("#photo").append(phCountStr);
            }

            // 保存
            $('#save').on('click',function(){
                if ($("#processRuleName").val().trim().length == 0) {
                    toastr.error("流程规则名称不得为空！");
                    return;
                }
                if ($("#processRuleName").val().trim().length > 25) {
                    toastr.error("流程规则名称不得超过25个字符！");
                    return;
                }
                if ($("#processRuleDescription").val().trim().length > 250) {
                    toastr.error("备注信息不得超过250个字符！");
                    return;
                }
                if($("#deviceTypeId").val() == "null"){
                    toastr.error("设备类型不得为空！");
                    return;
                }
                if($("#projectId").val() == "null"){
                    toastr.error("项目名称不得为空！");
                    return;
                }
                if($("#workOrderTypeId").val() == "null"){
                    toastr.error("工单类型名称不得为空！");
                    return;
                }
                console.log($("#additionalBusinessId").length)
                if($("#additionalBusinessId").val() == "null"){
                    toastr.error("附加任务信息不得为空！");
                    return;
                }
                if(phCount == null){
                    toastr.error("请选择示例图片数量！");
                    return;
                }
                if(phCount != 0){
                    if($(".img").length > phCount){
                        toastr.error("上传图片过多，请删除图片或修改允许示例图片数量！");
                        return;
                    }
                    if($(".img").length < phCount){
                        toastr.error("上传图片过少，请继续上传图片或修改允许示例图片数量！");
                        return;
                    }
                }
                imgList.splice(0,imgList.length);
                for(var i=0;i<$(".img").length;i++){
                    var obj={};
                    obj.deletePath = $($(".img")[i]).attr('delpath');
                    obj.downPath = $($(".img")[i]).attr('downpath');
                    obj.description = $(".imgDescription")[i].value.trim();
                    if(obj.description.length == 0){
                        toastr.error("图片描述不得为空！");
                        return;
                    }
                    if(obj.description.length > 25){
                        toastr.error("图片描述不得超过25个字符！");
                        return;
                    }
                    console.log(obj);
                    imgList[i] = obj;
                }
                var formData = {
                    "additionalBusinessId": $("#additionalBusinessId").val().trim(),
                    "description": $("#processRuleDescription").val().trim(),
                    "deviceTypeId": $("#deviceTypeId").val().trim(),
                    "deviceTypeName": $("#deviceTypeId").find("option:selected").text().trim(),
                    "name": $("#processRuleName").val().trim(),
                    "photoCount":phCount,
                    "processRuleToImageFileList": imgList,
                    "projectId": $("#projectId").val().trim(),
                    "projectName": $("#projectId").find("option:selected").text().trim(),
                    "workOrderTypeId": $("#workOrderTypeId").val().trim(),
                    "workOrderTypeName": $("#workOrderTypeId").find("option:selected").text().trim()
                };
                console.log(formData);

                $.ajax({
                    url: contextPath + '/ProcessRule/createProcessRule',
                    type: 'POST',
                    data: JSON.stringify(formData),
                    cache : false,
                    contentType: "application/json",
                    success: function (D) {
                        if(D.code == 1){
                            console.log(1);
                            toastr.success("新建流程规则，保存成功!");
                            console.log(D);
                            location.hash = "#qualitycontrol-systemGroup-processRule";
                        }
                        else{
                            console.log(D);
                            toastr.error(D.message);
                        }
                    },
                    error: function (D) {
                        toastr.error(D.message);
                    }
                });
            });

        </script>
    </div>
</body>
</html>